import { useDispatch, useSelector, connect, history, useModel } from 'umi';
import { FirstHeaderC, PrimaryC, SecondHeaderC } from '@/src/comps';
import { SelectC } from '@/src/components';
import { useEffect } from 'react';
import { Form } from 'antd';

const AllFromUmi = () => {
  const [formInstance] = Form.useForm(); // 表单实例
  const dispatch = useDispatch(); // 获取dispatch
  // useSelector接受一个state参数表示所有rootState，返回需要的state
  const { dataDictionary } = useSelector((state) => state.globalM);
  // 查看返回的参数： https://v3.umijs.org/zh-CN/plugins/plugin-initial-state#getinitialstate
  const { initialState, loading, error, refresh, setInitialState } = useModel('@@initialState'); // 获取初始化内容

  const getallDictionary = () => {
    dispatch({
      type: 'globalM/fetchDataDictionary',
    });
  };
  useEffect(() => {
    getallDictionary();
  }, []);
  return (
    <div>
      <FirstHeaderC title='umi内常用的导出' />
      <SecondHeaderC title='history' />
      <div style={{ paddingLeft: 20 }}>
        <div>新的路由跳转方式： </div>
        <PrimaryC
          title={'用history点击回到主页 /'}
          onClick={() => {
            history.push('/');
          }}
        />
      </div>
      <SecondHeaderC title='useDispatch和useSelector' topHeight={true} />
      <div style={{ paddingLeft: 20 }}>
        <div>使用useDispatch和useSelector来替代connect, 下面是获取到globalM内的workbenchConfiguration对象</div>
        <div style={{ width: 300 }}>
          <SelectC
            form={formInstance} // form对象
            title='下拉选择' // 显示名称
            dataIndex='select1' // Form识别的Item ID
            dataSource={dataDictionary?.workbenchConfiguration?.map((v) => ({ title: v.value, value: v.code })) ?? []}
            onChange={(e) => console.log(e)}
            rules={[{ required: true, message: '请输入' }]}
          />
        </div>
      </div>
      <SecondHeaderC title='useModel' />
      <div style={{ paddingLeft: 20 }}>
        <a target='_blank' href='https://v3.umijs.org/zh-CN/plugins/plugin-initial-state#getinitialstate'>
          该配置是一个 async 的 function。会在整个应用最开始执行，返回值会作为全局共享的数据。Layout 插件、Access 插件以及用户都可以通过 'useModel('@@initialState')'
          直接获取到这份数据。
        </a>
        我是useModel获取的数据 <span style={{ color: 'pink' }}>{JSON.stringify(initialState?.appInit)}</span>
      </div>
    </div>
  );
};
export default AllFromUmi;
